@use 'module';
@use '../resources';
@use "mixins";

// TODO: Move it to GLOBAL-CSS service, so it can be turned off and scoped.
@include module.va-typography;

* {
  font-family: var(--va-font-family);
}

.va-typography-block {
  font-family: var(--va-font-family);

  @for $i from 1 through 6 {
    h#{$i} {
      @include mixins.va-display($i);
    }
  }

  i:not([class^="va"]) {
    font-style: italic;
  }

  p {
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 1rem;
  }

  pre {
    margin-bottom: 1rem;
    overflow-x: auto;
    white-space: inherit;
    word-wrap: normal;

    @include resources.va-scroll(var(--va-primary));

    &.code {
      @include resources.va-code-snippet();
    }
  }

  code {
    display: inline-block;
    word-wrap: break-word;
  }

  strong,
  b {
    font-weight: resources.$font-weight-bold;
  }

  ol:not([class^="va"]) {
    @include mixins.va-ordered;
  }

  ul:not([class^="va"]) {
    @include mixins.va-unordered;
  }

  blockquote {
    @extend .va-blockquote;
  }

  figure {
    border-radius: 0;
    border: none;
    box-sizing: border-box;
    box-shadow: resources.$widget-box-shadow;
    word-wrap: break-word;

    figcaption {
      flex: 1 1 auto;
      padding: 1.25rem;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }

  table {
    @include mixins.va-table;
  }

  a:not([class^="va"]) {
    @include mixins.link();
  }
}
